<template>
	<z-paging class="Zpage" ref="paging" :fixed="false" :auto="false" :bottom-loading="true" use-virtual-list
		@query="onQuery" :show-scrollbar="false">
		<template #cell="{ item, index }">
			<compListItem :item="item" @click="onclick(item)"></compListItem>
		</template>
	</z-paging>
</template>

<script lang="ts" setup>
	import db from '@/api/database'
	import {
		ref,
		nextTick,
		onMounted,
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import compListItem from './comp-list-item.vue'

	const props = defineProps({
		item: {
			type: Object,
			default: {},
		},
	})

	const paging = ref(null)
	const testData = ref('')
	const emit = defineEmits(['login'])

	async function onQuery(pageNo, pageSize) {
		try {
			const offset = (pageNo - 1) * pageSize;
			const res = await db.collection('syslb')
				.orderBy('status', 'asc')
				.skip(offset)
				.limit(pageSize)
				.get();
			paging.value.complete(res.data);
		} catch (error) {
			console.error('查询数据失败:', error);
			paging.value.complete([], false);
		}
	}


	function scrollToBottom() { }

	function goToDetail(item, index) { }

	function backToTopClick() { }

	onShow(() => {
		nextTick(() => {
			if (paging.value) paging.value.reload()
		})
	})

	function onclick(item) {
		if (!uni.getStorageSync('user')) {
			emit('login')
		} else {
			uni.navigateTo({
				url: '/pages/sys/sys?id=' + item._id
			})
		}
	}

	// 若只想页面初次进入加载，可用 onMounted 替换 onShow 里的逻辑
	// onMounted(() => {
	//   paging.value && paging.value.reload()
	// })
</script>

<style lang="scss" scoped>
	@import "/static/css/iconfont.css";

	.Zpage {
		margin: 30px 10px 0;
		height: 50vh;
	}
</style>